<template>
  <div>
    <div v-for="(option, index) in options" :key="index" class="option-item">
      <el-input
        v-model="option.label"
        :placeholder="`输入框 ${index + 1}`"
        style="width: 80%; margin-right: 10px"
      >
        <template #prepend>
          <el-radio
            :label="option.value"
            v-model="localCorrectAnswer"
          />
        </template>
      </el-input>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        @click="$emit('removeOption', index)"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    correctAnswer: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localCorrectAnswer: this.correctAnswer
    }
  },
  watch: {
    correctAnswer(newVal) {
      this.localCorrectAnswer = newVal;
    },
    localCorrectAnswer(newVal) {
      this.$emit('updateCorrectAnswer', newVal);
    }
  }
};
</script>
<style>
.options-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
}

.option-item {
  margin-bottom: 15px;
}

/* 简化编辑器工具栏样式 */
.w-e-toolbar {
  flex-wrap: wrap;
  padding: 0 5px !important;
}

.w-e-menu {
  padding: 5px 8px !important;
}
</style>
